
import React, { useState } from 'react';
import { Card, Row, Col } from 'antd';
import { DeleteColumnOutlined, MoneyCollectOutlined, StockOutlined, AccountBookOutlined, PayCircleOutlined, PropertySafetyOutlined } from '@ant-design/icons'
import First from './components/first';
import Second from './components/second';
import Three from './components/three';
import Four from './components/four';
import Five from './components/five';
import Six from './components/six';

//67b8de  91c9e8  b4dced e8f8ff
let col = { xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 4 };


let Paytip = () => {
    const [state, setstate] = useState({
        visible: false,
        type: 1
    });

    return <Card>
        <Row style={{ padding: state.visible ? 0 : 12, height: state.visible ? 0 : "auto", transition: "all 0.4s", overflow: "hidden" }} gutter={18}>
            <Col {...col}>
                <div className="diycard" onClick={() => {
                    setstate({
                        visible: true,
                        type: 1
                    })
                }}>
                    <DeleteColumnOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>最低开单数与收单金额</span>
                </div>
            </Col>
            <Col {...col}>
                <div className="diycard" style={{ backgroundColor: "#3399cc" }} onClick={() => {
                    setstate({
                        visible: true,
                        type: 2
                    })
                }}>
                    <MoneyCollectOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>收单提成</span>
                </div>
            </Col>
            <Col {...col}>
                <div className="diycard" style={{ backgroundColor: "#67b8de" }} onClick={() => {
                    setstate({
                        visible: true,
                        type: 3
                    })
                }}>
                    <StockOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>浮动底薪管理</span>
                </div>
            </Col>
            <Col {...col}>
                <div className="diycard" style={{ backgroundColor: "#2be0a4" }} onClick={() => {
                    setstate({
                        visible: true,
                        type: 4
                    })
                }}>
                    <AccountBookOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>开户提成设置</span>
                </div>
            </Col>

            <Col {...col}>
                <div className="diycard" style={{ backgroundColor: "#a6c1ee" }} onClick={() => {
                    setstate({
                        visible: true,
                        type: 5
                    })
                }}>
                    <PayCircleOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>其他业务提成</span>
                </div>
            </Col>

            <Col {...col}>
                <div className="diycard" style={{ backgroundColor: "lightgreen" }} onClick={() => {
                    setstate({
                        visible: true,
                        type: 6
                    })
                }}>
                    <PropertySafetyOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                    <span>代账提成</span>
                </div>
            </Col>


        </Row>
        <div style={{ transform: state.visible ? "scale(1)" : "scale(0)", transition: "all 0.4s" }}>
            {
                (state.visible && state.type == 1) && <First close={() => {
                    setstate({
                        visible: false,
                        type: 1
                    })
                }}></First>
            }

            {
                (state.visible && state.type == 2) && <Second close={() => {
                    setstate({
                        visible: false,
                        type: 2
                    })
                }}></Second>
            }

            {
                (state.visible && state.type == 3) && <Three close={() => {
                    setstate({
                        visible: false,
                        type: 3
                    })
                }}></Three>
            }

            {
                (state.visible && state.type == 4) && <Four close={() => {
                    setstate({
                        visible: false,
                        type: 4
                    })
                }}></Four>
            }

            {
                (state.visible && state.type == 5) && <Five close={() => {
                    setstate({
                        visible: false,
                        type: 5
                    })
                }}></Five>
            }

            {
                (state.visible && state.type == 6) && <Six close={() => {
                    setstate({
                        visible: false,
                        type: 6
                    })
                }}></Six>
            }
        </div>



    </Card>


}



export default Paytip